<template>
  <div class="des-text">
    支持向量机回归（SVR）用非线性映射将数据映射到高维数据特征空间进行拟合。
    <span class="detail" @click="detailVisible = true">详细></span>
  </div>


  <el-dialog v-model="detailVisible" :close-on-click-modal="false" width="50%">
    <template #header>
      <h2 style="text-align: center;">支持向量机(SVR)回归</h2>
      <el-scrollbar height="500px">
        <div class="dialog-contain">
          <div class="label">详细解释</div>
          <p>
            支持向量机回归（SVR）用非线性映射将数据映射到高维数据特征空间中，使得在高维数据特征空间中自变量与因变量具有很好的线性回归特征，在该特征空间进行拟合后再返回到原始空间。
          </p>
        </div>
        <div class="example-area">
          <div style="height: 181px;width: 260px;">
            <img src="@/assets/studen/images/huigui.png" />
          </div>
          <div class="describe-item">
            示例：
            <br>
            <div>
              某工厂投入某种物料(自变量X)，可以生产一种产品(因变量Y)。使用支持向量机(SVR)回归预测投入物料之后能得到的产品数。
            </div>
          </div>
        </div>
        <div class="bottom">
          <div class="label">输入输出描述：</div>
          <p>输入：自变量X为5个或5个以上的定量变量，因变量Y为一个定量变量。</p>
          <p>输出：模型输出的预测值及模型预测效果。</p>
        </div>
      </el-scrollbar>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch, reactive, nextTick, onMounted } from 'vue';
const detailVisible = ref(false)
</script>

<style scoped lang="scss" >
.des-text {
  color: #6a6f77;
  font-size: 12px;
  padding: 18px 20px;
}

.detail {
  color: #1a78ff;
  cursor: pointer;
  display: inline-flex;
  flex-wrap: nowrap;
}

.dialog-contain {
  padding: 18px 28px 12px
}

.label {
  font-size: 16px;
  color: #2b323d;
  font-weight: 600;
  padding: 2px 0 10px 0;
}

.example-area {
  display: flex;
  margin-top: 10px;
  padding: 18px 28px 12px
}

.describe-item {
  color: #aaadb1;
  margin-left: 25px;
  width: 300px;
}

.bottom {
  padding: 18px 28px 12px
}
</style>

